<!DOCTYPE html>
<html lang="zh-cn" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <meta name="renderer" content="webkit">
        <title></title>
        <link rel="stylesheet" href="./css/pintuer.css">
        <link rel="stylesheet" href="./css/admin.css">
        <script src="./js/jquery.js"></script>
        <script src="./js/pintuer.js"></script>
        <script src="./js/vuejs-2.5.16.js"></script>
        <script src="./js/axios-0.18.0.js"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="./element-ui/lib/index.js"></script>

    </head>
    <body>
        <div class="panel admin-panel" id="bannerListDiv">
            <div class="panel-head"><strong class="icon-reorder">用户列表</strong> <a href=""
                                                                                   style="float:right; display:none;">添加字段</a>
            </div>
            <div class="padding border-bottom">
                <form>
                    <ul class="search" style="padding-left:10px;">
                       <!-- <li><a class="button border-main icon-plus-square-o" href="/banner_add.html">添加用户数据</a></li>-->
                        <li>搜索：</li>
                        <li>
                            <input type="text" placeholder="请输入搜索标题" class="input"
                                   style="width:250px; line-height:17px;display:inline-block" v-model="title"/>
                            <a class="button border-main icon-search" @click="findByPage()"> 搜索</a></li>
                    </ul>
                </form>
            </div>
            <table class="table table-hover text-center">
                <tr>
                    <th width="5%">选择</th>
                    <th>头像</th>
                    <th>昵称</th>
                    <th>性别</th>
                    <th>地址</th>
                    <th width="310">查看地图</th>
                </tr>
                <form>
                    <tr v-for="banner in pagination.list">
                        <td style="text-align:left; padding-left:10px;"><input type="checkbox" name="ids" :value="banner.id" v-model="ids"/></td>
                        <td width="10%"><img :src="banner.avatar" alt="" width="70" height="50"/></td>
                        <td v-text="banner.nickname">乌龙特工</td>
                        <td v-if="banner.gender=='man'">男</td>
                        <td v-if="banner.gender=='woman'">女</td>
                        <td v-text="banner.address">https://www.iqiyi.com/v_19rrllxz4g.html</td>
                        <td><a  :href="'/guide.html?id='+banner.id"><i class="el-icon-location-outline"></i>查看</a></td>
                       <!-- <td>
                            <div class="button-group">
                                <a class="button border-main" :href="'/banner_add.html?id='+banner.id"><span
                                        class="icon-edit"></span>修改</a>
                                <a class="button border-red" href="javascript:void(0)"  @click="deleteById(banner.id)">
                                    <span class="icon-trash-o"></span> 删除</a>
                            </div>
                        </td>-->
                    </tr>


                </form>
                <tr>
                    <td colspan="7" style="text-align:left;padding-left:20px;">
                        <!--<a href="javascript:void(0)" class="button border-red icon-trash-o" style="padding:5px 15px;" @click="deleteByIds()">
                            批量删除</a>-->
                        <span>总记录数：{{pagination.total}}</span>
                    </td>
                </tr>
                <tr>
                    <td colspan="8">
                        <div class="pagelist">
                            <!--分页组件-->
                            <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="pagination.pageNum"
                                    :page-size="pagination.pageSize"
                                    :total="pagination.total"
                                    background
                                    layout="prev, pager, next">
                            </el-pagination>
                        </div>
                    </td>
            </table>
        </div>
        <script>
            const app = new Vue({
                el: '#bannerListDiv',
                data: {
                    ids:[],
                    title: "",
                    pagination: { // 分页对象
                        pageNum: 1,
                        pageSize: 5,
                        total: 20,
                        list: []
                    },
                },
                methods: {
                    // 分页查询
                    findByPage() {
                        axios.get("/soul/user/findUserAll", {
                            params: {
                                pageNum: this.pagination.pageNum,
                                pageSize: this.pagination.pageSize,
                                title:this.title
                            }
                        }).then(resp => {
                            this.pagination.total = resp.data.counts;
                            this.pagination.list = resp.data.items
                        })


                    },
                    //当前页改变时调用的方法
                    handleCurrentChange(pageNum) {
                        //将最新页码赋值给分页对象的当前页码
                        this.pagination.pageNum = pageNum;
                        //重新发起分页请求
                        this.findByPage();
                    },
                    //改变每页大小时调用的方法
                    handleSizeChange(pageSize) {
                        //将最新的每页大爱小赋值给分页对象的当前页码
                        this.pagination.pageSize = pageSize;
                        //重新发起分页请求
                        this.findByPage();
                    },

                },
                created() {
                    this.findByPage();

                }
            })
        </script>
        <script src="/js/verify.js"></script>
    </body>
</html>